<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar :back="true" title="撰写追忆文章"></title-bar>
		<view :style="{ minHeight: systemInfo.minHeight }" class="page-content common-page-content">
			<view class="title-layout"><view class="title-text">文章标题</view></view>
			<input class="article-title-layout" v-model="form.title" maxlength="16" placeholder="请输入文章标题" />
			<view class="title-layout"><view class="title-text">文章内容</view></view>
			<view class="textarea-layout">
				<view class="content-top"></view>
				<view class="content-middle">
					<textarea auto-height placeholder="请输入文章内容" v-model="form.content" disable-default-padding maxlength="800" @input="contentChange"></textarea>
					<view class="textarea-prompt">
						您还可以输入
						<text class="number">{{ contentNum }}</text>
						个字
					</view>
				</view>
				<view class="content-bottom"></view>
			</view>
			<view class="title-layout"><text class="title-text">文章图片</text></view>
			<view class="photo-layout">
				<view class="photo-item" v-for="(item, index) in form.pictures" :key="index">
					<image :src="imageUrl + item.url"></image>
					<view @click="deletePhoto(index)" class="delete-btn">删除</view>
				</view>
				<image @click="uploadPhoto" v-if="form.pictures.length < 4" class="add-photo" src="@/static/image/common/icon_add_photo.png"></image>
			</view>
			<view class="common-margin-top"><common-button :title="form.id == undefined ? '发表文章' : '修改文章'" @click="publish()"></common-button></view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	data() {
		return {
			baseUrl: process.env.NODE_ENV === 'development' ? this.$config.baseUrl.dev : this.$config.baseUrl.pro,
			imageUrl: process.env.NODE_ENV === 'development' ? this.$config.imageUrl.dev : this.$config.imageUrl.pro,
			role: 0,
			form: {
				id: undefined,
				pictures: []
			},
			contentNum: 800
		};
	},
	computed: {
		...mapState({
			systemInfo: state => state.app.systemInfo
		})
	},
	methods: {
		/* 内容输入监听 */
		contentChange(e) {
			this.contentNum = 800 - e.detail.value.length;
		},
		/* 上传照片 */
		uploadPhoto() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed '],
				success: chooseImageRes => {
					uni.showLoading({
						title: '图片上传中...'
					});
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: this.baseUrl + '/app/common/upload',
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							Authorization: uni.getStorageSync('Authorization')
						},
						success: uploadFileRes => {
							let data = JSON.parse(uploadFileRes.data);
							this.form.pictures.push({ url: data.fileName });
							uni.hideLoading();
						},
						fail: error => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败，请重试'
							});
						}
					});
				}
			});
		},
		/* 删除照片 */
		deletePhoto(index) {
			this.form.pictures.splice(index, 1);
		},
		/* 发表追忆文章 */
		publish() {
			if (this.form.title == null || this.form.title == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入文章标题'
				});
				return;
			}
			if (this.form.content == null || this.form.content == '') {
				uni.showToast({
					icon: 'none',
					title: '请输入文章内容'
				});
				return;
			}
			this.$debounce.debounce({
				key: 'publish',
				time: 3000,
				success: () => {
					if (this.form.id == undefined) {
						// 管理员发布的内容不需要审核
						if (this.role == 1) {
							this.form.status = 1;
						}
						this.$http.postJson('/article', this.form).then(res => {
							if (res.code === 200) {
								uni.showToast({
									icon: 'none',
									title: '发布成功'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						});
					} else {
						// 非管理员修改内容需要重新审核
						if (this.role != 1) {
							this.form.status = 0;
						}
						this.$http.put('/article', this.form).then(res => {
							if (res.code === 200) {
								uni.showToast({
									icon: 'none',
									title: '修改成功'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						});
					}
				}
			});
		},
		/* 加载文章 */
		loadArticle() {
			this.$http.get('/article/' + this.form.id).then(res => {
				if (res.code === 200) {
					this.form = Object.assign({}, res.data);
					this.contentNum = 800 - this.form.content.length;
				}
			});
		}
	},
	onLoad(data) {
		this.role = data.role;
		this.form.hallId = data.hallId;
		this.form.id = data.id;
		if (this.form.id != undefined) {
			this.loadArticle();
		}
	}
};
</script>

<style lang="scss" scoped>
@import './publish-article.scss';
</style>
